import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:matuo/map/AMap.dart';
import 'package:matuo/map/AMapLocation.dart';

import '../../generated/l10n.dart';
import '../../utils/DIYColors.dart';
import '../../utils/Utils.dart';

class MovementPage extends StatefulWidget {
  const MovementPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MocementPageState();
  }
}

class _MocementPageState extends State<MovementPage> {
  @override
  void initState() {
    super.initState();
    AMapLocation.instance.startLocation();
    AMapLocation.instance.locationPlugin((callback) {
      setState(() {
        // 进行定位点移动
        AMap.instance.changeCameraPosition(callback);
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    AMapLocation.instance.stopLocation();
    AMapLocation.instance.cancelLocation();
  }

  String gifName = "icon_walk_gif";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: DIYColors.gray_f4,
        body: SafeArea(
            child: Column(children: [
          Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(width: 15.w),
                Text(S.of(context).ViewYourWorkoutHistory,
                    style:
                        TextStyle(color: DIYColors.gray_99, fontSize: 16.sp)),
                Image.asset(Utils.instance.getImagePathPNG("rightward"),
                    width: 24.w, height: 14.h)
              ]),
          Row(mainAxisAlignment: MainAxisAlignment.start, children: [
            SizedBox(width: 15.w),
            Flexible(
                flex: 1,
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(children: [
                        Text("2000",
                            style: TextStyle(
                                color: Colors.black, fontSize: 28.sp)),
                        Text("M",
                            style: TextStyle(
                                color: DIYColors.gray_99, fontSize: 14.sp))
                      ]),
                      Text(S.of(context).TheDurationLastWorkout,
                          style: TextStyle(
                              color: DIYColors.gray_99, fontSize: 14.sp))
                    ])),
            SizedBox(width: 5.w),
            Flexible(
                flex: 1,
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(children: [
                        Text("2000",
                            style: TextStyle(
                                color: Colors.black, fontSize: 28.sp)),
                        Text(S.of(context).kcal,
                            style: TextStyle(
                                color: DIYColors.gray_99, fontSize: 14.sp))
                      ]),
                      Text(S.of(context).deplete,
                          style: TextStyle(
                              color: DIYColors.gray_99, fontSize: 14.sp))
                    ])),
            SizedBox(width: 15.w)
          ]),

          Container(
              margin: EdgeInsets.only(left: 35.r, right: 35.r),
              width: double.infinity,
              height: 50.h,
              child: DefaultTabController(
                length: 3, // 标签的数量

                child: Scaffold(
                    appBar: AppBar(
                  title: null,
                  bottom: TabBar(
                      tabs: [
                        Tab(text: S.of(context).walk),
                        Tab(text: S.of(context).jogging),
                        Tab(text: S.of(context).Ride),
                      ],
                      overlayColor:
                          MaterialStateProperty.all(Colors.transparent),
                      labelStyle: const TextStyle(color: DIYColors.orange_2d),
                      //选中文字颜色
                      unselectedLabelStyle:
                          const TextStyle(color: DIYColors.gray_99),
                      //未选中文字颜色
                      indicator: UnderlineTabIndicator(
                        borderSide: BorderSide(
                          width: 2.w,
                          color: DIYColors.orange_2d, // 选中下划线颜色
                        ),
                        insets: EdgeInsets.symmetric(horizontal: 60.w), //设置宽度
                      ),
                      dividerColor: Colors.transparent,
                      //设置底部灰色横线透明
                      onTap: (index) {
                        // 点击事件处理

                        setState(() {
                          if (index == 0) {
                            gifName = "icon_walk_gif";
                          } else if (index == 1) {
                            gifName = "icon_running_gif";
                          } else if (index == 2) {
                            gifName = "icon_cycling_gif";
                          }
                        });
                      }),
                  backgroundColor: DIYColors.gray_f4,
                )),
              )),
          Expanded(
              child: Stack(
            children: [
              AMap.instance.aMapWidget(),
              Container(
                  decoration: const BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [
                        //渐变色
                        Colors.white,
                        Colors.transparent,
                        Colors.white
                      ])),
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 35.h),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              SizedBox(width: 20.w),
                              Image.asset(Utils.instance.getImagePathPNG("gps"),
                                  width: 96.w, height: 28.h),
                              const Expanded(child: SizedBox()),
                              Image.asset(
                                  Utils.instance
                                      .getImagePathPNG("icon_motion_location"),
                                  width: 52.w,
                                  height: 52.h),
                              SizedBox(width: 20.w),
                            ]),
                        const Expanded(child: SizedBox()),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              SizedBox(width: 52.w),
                              Image.asset(
                                  Utils.instance
                                      .getImagePathPNG("icon_motion_target"),
                                  width: 68.w,
                                  height: 68.w),
                              const Expanded(child: SizedBox()),
                              Image.asset(
                                  Utils.instance.getImagePathGIF(gifName),
                                  width: 68.w,
                                  height: 68.w),
                              const Expanded(child: SizedBox()),
                              Image.asset(
                                  Utils.instance
                                      .getImagePathPNG("icon_motion_su"),
                                  width: 68.w,
                                  height: 68.w),
                              SizedBox(width: 52.w),
                            ]),
                        SizedBox(height: 50.h)
                      ]))
            ],
          ))

          // SizedBox(
          //     width: double.infinity,
          //     height: 486.h,
          //     child: AMap.instance.aMapWidget())
        ])));
  }
}
